<template>
  <div class="div" style="border-radius: 10px;">
    <div id="chart_unfinished_map"></div>
  </div>
</template>


<script>
  import echarts from "echarts";
  import {getCancelMoney} from '@/api/dataCentre/orderCount.js'
  export default {
    components: {},
    data() {
      return {
        // 查询参数
        queryParams: {
          //结束日期
          endTime: null ,
          //开始日期
          startTime: null
        },
        type: '',
        xAxisData: [],
        series: [

        ],
        title: {text: ''},
        legendData: []
      };
    },
    props: {
      //默认进入
      selectStr: {
        type: String,
        default: "cancelOrderDate",
      },
    },
    mounted() {


    },
    methods: {
      /** 查询订单结算列表 */
      getList() {
        debugger
        this.queryParams.type = 'cancelOrderDate'
        getCancelMoney(this.queryParams).then((response) => {
          this.xAxisData = response.data.xaxis.data
          this.series.name = response.data.title
          this.series = response.data.series
          this.legendData = response.data.legend.data
          this.title.text =response.data.title

          this.myChart()

        })
      },
      myChart() {
        let this_ = this;
        let myChart = echarts.init(document.getElementById("chart_unfinished_map"));
        let option = {
          title: this.title,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.legendData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },

          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: this.series
        }
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    watch: {},
    created() {
      this.getList()
    },
  };
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h2 {
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }

  #chart_unfinished_map {
    width: 100%;
    height: 500px;

  }

  .div {
    background: #fff;
    margin: 5px 5px 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .mms-symc-card-list-new__wrapper .newCardInnerWrapper .mms-symc-card-item-new__wrapper.selected {
    background: #f0f7ff;
    border: 1px solid #91bbff;
    border-top: 2px solid #407cff;
  }
</style>


